<!-- 材料智能体-科学大模型-催化大模型 -->
<template>
  <div class="main-app">
    <el-page-header @back="cancel" :content="title" style="margin: 1%;"></el-page-header>
    <div style="width: 95%; margin: 1% 0 0 2%;">
      <el-form ref="form" :model="form" :rules="rules" label-width="5%">
        <el-row :gutter="20" style="margin-top: 10px" v-if="isShowUploadFile === true">
          <el-col :span="24">
            <el-form-item :label="$t('common.label.selectFile')+':'">
              <el-upload
                :limit="1"
                action=""
                accept=".txt"
                :auto-upload="false"
                :on-change="(file, fileList) => {handleChange(file, fileList)}"
                :file-list="fileList">
                <el-popover
                  width="300"
                  trigger="hover"
                  placement="top"
                  :title="$t('common.label.textDocumentFormat')"
                  :content="$t('common.label.onlySupportedTextDocumentFormat')">
                  <el-button size="small" type="primary" slot="reference">{{$t('common.button.clickToUpload')}}</el-button>
                </el-popover>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20" style="margin-top: 10px">
          <el-col :span="12">
            <div class="titie-bar"><span>{{$t('common.title.resultImgData')}}</span></div>
            <div class="statistics-panal" v-loading="loading_resultImg">
              <el-empty v-if="form.resultImg === null" :image-size="180" description="No Data" style="margin-top: 20%;"></el-empty>
              <img v-if="form.resultImg !== null" src="" style="width: 100%;" />
            </div>
          </el-col>
          <el-col :span="12">
            <div class="titie-bar"><span>{{$t('common.title.predictedEnergyValue')}}</span></div>
            <div class="statistics-panal" v-loading="loading_resultValue">
              <div class="statistics-number"><span>{{form.resultValue}}</span></div>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script>
import {
  Energypre,                                 // 能量预测
  DialogueStatus                             // 当前对话任务状态查询
} from "../../../../api/bigModel.js";

export default {
  // 页面公共变量
  data() {
    return {
      isShowUploadFile: true,               // 是否显示上传文件
      loading_resultImg: false,             // 加载框-返回图片数据
      loading_resultValue: false,           // 加载框-预测能量值
      title: "催化大模型",                  // 顶部标题
      // 表单文件
      form: {
        file: null,                         // 选择的文件
        resultImg: null,                    // 返回的图片
        resultValue: "---",                 // 返回预测能量值
      },
      fileList: [],                         // 已选择的文件列表
      waitTimer_resultImg: null,            // 等待响应计时器-返回图片
      waitTimer_resultValue: null,          // 等待响应计时器-预测能量值
    };
  },
  // 页面创建完成事件
  async created() {
    this.title = this.$t('common.title.catalyticLargeModel');
  },
  beforeDestroy() {
    clearInterval(this.waitTimer_resultImg);
    clearInterval(this.waitTimer_resultValue);
    console.log('定时刷新数据计时器已清除');
  },
  // 页面相关方法
  methods: {
    // 文件发生改变事件
    async handleChange(file, fileList) {
      // 提取选择的文件流
      this.form.file = file.raw;

      // 关闭上传文件功能, 避免多次上传
      this.isShowUploadFile = false;

      // 提交数据
      this.save();
    },
    // 提交数据事件
    save() {
      // 初始化提交数据
      const formData = new FormData();
      formData.append('poscar', this.form.file);

      // 领域知识问答
      Energypre(formData).then(res => {
        let current_task_id = res.current_task_id;      // 用于接收一个图片
        let current_task_id_1 = res.current_task_id_1;  // 用于接收预测能量值

        this.getResultImg(current_task_id);
        this.getResultValue(current_task_id_1);
      });

      this.$message({ type: 'success', message: this.$t('common.prompt.success.submitAndWait') });
    },
    // 获取返回图片
    getResultImg(currentTaskId) {
      // 显示加载框
      this.loading_resultImg = true;

      // 等待任务返回结果
      this.waitTimer_resultImg = setInterval(async () => {
        DialogueStatus(currentTaskId).then((res) => {
          try {
            if (res.status === "done") {
              // 处理成功时为直接返回的文件流, 此处不写任何逻辑代码
            }
          } catch {
            // 关闭加载框
            this.loading_resultImg = false;

            // 发生异常, 可能为直接返回的文件流, 直接设置数据源
            this.form.resultImg = res;

            // 清空计时器
            clearInterval(this.waitTimer_resultImg);
          }
        });
      }, 1500);
    },
    // 获取返回预测能量值
    getResultValue(currentTaskId) {
      // 显示加载框
      this.loading_resultValue = true;

      // 等待任务返回结果
      this.waitTimer_resultValue = setInterval(async () => {
        DialogueStatus(currentTaskId).then((res) => {
          if (res.status === "done") {
            // 关闭加载框
            this.loading_resultValue = false;

            // 设置返回值
            this.form.resultValue = res.result;

            // 清空计时器
            clearInterval(this.waitTimer_resultValue);
          }
        });
      }, 1500);
    },
    // 返回事件
    cancel() {
      this.$router.back();
    },
  },
};
</script>

<style lang="scss" scoped>
/*空状态框架*/
::v-deep .el-empty__image {text-align: center;margin-left: auto;margin-right: auto;}
::v-deep .el-empty__description {color: #AAAAAA;}

// 区域标题样式
.titie-bar {
  width: 4px;
  height: 32px;
  border-radius: 2px;
  background-color: rgba(61, 171, 175, 1);
  margin: 5px 0 5px 0;
}
.titie-bar span {
  color: #0A0A0A;
  width: 80px;
  font-size: 22px;
  line-height: 32px;
  white-space: nowrap;
  overflow-wrap: break-word;
  margin-left: 15px;
}
.statistics-panal {
  width: 40vw;
  height: 64vh;
  border-radius: 8px;
  box-shadow: 0px 2px 6px 0px rgba(39, 122, 160, 0.09);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  margin-top: 10px;
  text-align: center;
}
.statistics-titie {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-color: rgba(61, 171, 175, 1);
  margin: 25px 0 0 20px;
  display: flex;
  flex-direction: column;

  span {
    color: #0A0A0A;
    font-size: 22px;
    white-space: nowrap;
    overflow-wrap: break-word;
    margin-top: -5px;
    margin-left: 20px;
    display: flex;
    flex-direction: column;
  }
}
.statistics-number {
  text-align: center;
  margin-top: 30%;
  display: flex;
  flex-direction: column;

  span {
    color: rgba(1, 107, 110, 1);
    font-size: 64px;
    white-space: nowrap;
    overflow-wrap: break-word;
    display: flex;
    flex-direction: column;
  }
}
</style>
